<template>
    <!-- 点击用户头像时触发显示页面，“我的文章”菜单项显示内容 -->
     <div id="user-center-myArticle-contrainer">
        <el-row id="user-center-myArticle-contrainer-header">
            <span>
                我的文章
            </span>
        </el-row>
        <el-divider/>
        <el-row id="user-center-myArticle-contrainer-main" v-for="(articleBrief,index) in articleBriefs" :key="index">
            <el-col :lg="8">
                <el-image :src="articleBrief.picUrl"/>
                <div id="user-center-myArticle-contrainer-main-operate">
                    <span><i class="el-icon-star-off"/>收藏&ensp;{{articleBrief.collectNum}}</span>
                    &ensp;&ensp;
                    <span><i class="el-icon-view"/>浏览&ensp;{{articleBrief.glanceNum}}</span>
                    &ensp;&ensp;
                    <span><svg-icon class="el-icon-chat-dot-round"/>评论数&ensp;{{articleBrief.commentNum}}</span>
                </div>
            </el-col>
            <el-col :lg="15">
                <div id="user-center-myArticle-contrainer-main-title">
                    <span><strong @click="toContent(articleBrief)">{{articleBrief.title}}</strong></span>
                </div>
                <div id="user-center-myArticle-contrainer-main-content">
                    <div>
                        <span>作者：</span>
                        &nbsp;
                        <span>{{articleBrief.author}}</span>
                    </div>
                    <div>
                        <span>发表时间：</span>
                        &nbsp;
                        <span>{{articleBrief.issueTime}}</span>
                    </div>
                    <div>
                        <span>价格：</span>
                        &nbsp;
                        <span>
                            {{articleBrief.price}}
                        </span>
                    </div>
                    <div>
                        <span>
                            <el-button size="small" type="danger" @click="toEdit(articleBrief)">重新编辑</el-button>
                            <el-button size="small" type="info">移除</el-button>
                        </span>
                    </div>
                </div>
            </el-col>
        </el-row>
     </div>
</template>
<script>
import {getArticleByUserId} from "@/api/article/MyArticle.js";

export default {
    name: 'MyArticle',
    data() {
        return {
            articleBriefs: [
                {
                    author: '张三',
                    issueTime: new Date().getFullYear()+'/'+(new Date().getMonth()+1)+'/'+new Date().getDate(),
                    title: '',
                    commentNum: 144,
                    glanceNum: 666,
                    collectNum: 122
                },
                
            ]
        }
    } ,
    created(){
        this.getArticleList();
    },
    methods:{
        getArticleList(){
            getArticleByUserId().then(response=>{
                if(response.data.data!=null){
                    this.articleBriefs=response.data.data;
                }
            })
        },
        //跳转到编辑页面
        toEdit(articleBrief){
            this.$router.push({
                path: '/writeArticle',
                query: {article:articleBrief}
            });
        },
        //跳转到文章详情页面
        toContent(articleBrief){
            this.$router.push({
                path: '/articleContent',
                query: articleBrief
            });
        }
    }     
}
</script>
<style>
     #user-center-myArticle-contrainer-main-title, #user-center-myArticle-contrainer-main-content {
        margin-left: 3%;
    }
    #user-center-myArticle-contrainer-main-title, #user-center-myArticle-contrainer-main-content > div {
        margin-top: 1%;
    }
    #user-center-myOrder-contrainer-header {
        font-size: 22px;
        height: 32px;
        line-height: 32px;
    }
    #user-center-myArticle-contrainer-main-title {
        font-size: 24px;
        cursor: pointer;
    }
    #user-center-myArticle-contrainer-main-content > div > span:first-child {
        color: #909399;
    }
    #user-center-myArticle-contrainer-main-content > div:nth-last-child(2) > span:last-child {
        font-size: 20px;
        color: rgb(255, 72, 0);
    }
    #user-center-myArticle-contrainer-main {
        padding-bottom: 1%;
        margin-bottom: 3%;
        border-bottom: 1px solid gainsboro;
    }
    #user-center-myArticle-contrainer-main .el-image {
        width: 100%;
        height: 160px;
    }
    #user-center-myArticle-contrainer-header > span {
        font-size: 22px;
    }
    #user-center-myArticle-contrainer-main-operate  {
        margin-top: 1%;
        width: 96%;
        color: #909399;
        font-size: 14px;
    }
</style>